<template>
  <a-button class="tool" :disabled="renderOptions.disabled" v-bind="defaultProps" @click="handleClick()">{{defaultProps.title}}</a-button>
</template>

<script>
export default {
  name: 'VxeToolbarTool',
  props: {
    renderOptions: Object,
    params: Object,
    toolbarProps: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      defaultProps: {
        title: ''
      }
    }
  },
  methods: {
    handleClick() {
      const { events = {}} = this.renderOptions
      const { button, $grid } = this.params
      events.click && events.click(button, $grid)
      console.log($grid)
      $grid.commitProxy('2222')
    }
  },
  mounted() {
    this.defaultProps = Object.assign({}, this.defaultProps, this.toolbarProps)
  }

}
</script>
<style lang="less" >
.z-vxe-toolbar{
  .tool{
    height:30px;
    width:30px;
    i{
      font-size: 14px;
      line-height: 30px;
    }
  }
  .tool.ant-btn-circle{
    min-width:30px;
  }
}
</style>
